<template>
  <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      :loop="true"
      navigation
      :pagination="{ clickable: true }"
      :autoplay="{delay: 2000,disableOnInteraction: false}"
  >
    <swiper-slide v-for="(item,index) in list1" :key="index">
      <img :src="item.carouselUrl" />
    </swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, A11y, Autoplay } from 'swiper';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import {onMounted, ref} from "vue"
import {getAllCarousel} from "@/api/carousel"
/**
 * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
 */
//https://blog.csdn.net/weixin_42063951/article/details/121354984可以参考这个博客
// import "swiper/swiper-bundle.min.css";

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    //list1是从后端获取的轮播图内容
    const list1 = ref()
    //ref是把list1变成响应式的数据对象，使得它的数据在数据库中改变时可以随之渲染出来
    //onMounted是vue3的一个钩子函数，在页面渲染之前会执行该函数
    onMounted(()=>{
      //引用我们封装好的api来获得数据库中的所有图片
      getAllCarousel().then((response)=>{
        // console.log(response.data),在网页的控制台上面可以看出来response.data是一个数组
        const data = response.data.data
        //我们把获取的数组赋值给list1
        list1.value = data
      })
    })
    return {
      //把list1返回到template里面以使用
      list1,
      modules: [Navigation, Pagination, A11y, Autoplay]//navigation是箭头，Pagination是小圆点，Autoplay是自动播放的设置
      //disableOnInteraction属性是控制手动切换后自动播放还是否有用
    };
  },
};
</script>
<style scoped>
/*轮播图的样式*/
.swiper::v-deep .swiper-slide {
  height: 500px;
  line-height: 1000px;
  font-size: 30px;
  text-align: center;
  background-color: red;
}
/*改变小圆点的颜色*/
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet {
  background: red;
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
  background: red;
}
/*修改箭头颜色*/
.swiper::v-deep .swiper-button-next {
  color: red;
  font-size: 5px;
}
.swiper::v-deep .swiper-button-prev {
  color: red;
}
/*修改箭头大小*/
.swiper::v-deep .swiper-button-next:after {
  font-size: 30px;
}
.swiper::v-deep .swiper-button-prev:after {
  font-size: 30px;

}
</style>

